<template>
  <el-table ref="table" :data="attrExt" border stripe style="width: 100%">
    <el-table-column prop="attrValue" :label="productVo.attrs[0].name" />
    <el-table-column label="封面图">
      <template #default="scope">
        <m-single-upload
          v-model="scope.row.attrValueInfo.coverImage"
          uploadUrl="/user/uploadFile"
          :uploadFun="uploadFun"
          :width="50"
        />
      </template>
    </el-table-column>
    <el-table-column label="详情图">
      <template #default="scope">
        <el-button type="primary" size="small" @click="showAttrDetailConfig(scope.row.attrValueInfo)">设置</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SpecExtConfig ref="specExtConfig" />
</template>
<script setup lang="ts">
import { ref, shallowRef, PropType, useTemplateRef, reactive } from "vue";
import { uploadFun } from "@/utils/utils";
import { MSingleUpload } from "page-com";
import SpecExtConfig from "./SpecExtConfig.vue";
interface ShopProductAttrValueDetailVoUse extends ShopProductAttrValueDetailVo {
  attrValueInfo: ShopGoodsAddAttrValueVo;
}
const attrValueInfos = defineModel({ type: Object as PropType<ShopGoodsAddAttrValueVo[]>, required: true });
const { productVo } = defineProps({
  productVo: {
    type: Object as PropType<ShopProductDetailVo>,
    required: true
  }
});
const table = useTemplateRef("table");
const specExtConfig = useTemplateRef("specExtConfig");
let map = new Map<number, ShopGoodsAddAttrValueVo>();
if (attrValueInfos.value.length > 0) {
  attrValueInfos.value.forEach(val => {
    map.set(val.attrValueId, val);
  });
} else {
  productVo.attrs[0].value.forEach(attr => {
    let attrValueInfo: ShopGoodsAddAttrValueVo = reactive({
      attrValueId: attr.attrValueId,
      coverImage: "",
      detailImages: []
    });
    map.set(attr.attrValueId, attrValueInfo);
    attrValueInfos.value.push(attrValueInfo);
  });
}

let attrExt: ShopProductAttrValueDetailVoUse[] = productVo.attrs[0].value.map(attr => ({
  ...attr,
  attrValueInfo: map.get(attr.attrValueId)
}));
function showAttrDetailConfig(vo: ShopGoodsAddAttrValueVo) {
  specExtConfig.value.show(vo);
}
</script>
